<template>
  <div>
    <label style="margin-right: 8px;">
      <input type="number" value="5" class="sea-input input-number" v-model="valueModel" @change="textChange"></input>
      /{{ total }}
    </label>
    <el-button-group>
      <el-button title="上一页" @click="previousPage"><i class="fa fa-fw fa-chevron-left"></i></el-button>
      <el-button title="下一页" @click="nextPage"><i class="fa fa-fw fa-chevron-right"></i></el-button>
    </el-button-group>
  </div>
</template>

<script>
/* eslint-disable */
import Pagination from './pagination'
import Layers from "@/lang/layers/index";

/**
 * 分页字段名配置
 */
const pageField = 'page';
const limitField = 'limit';

/**
 * 小型分页
 *
 * 只有上一页/下一页选项的分页选项，更容易嵌套在 card 布局中
 */
export default {
    name: "SeaSmallPagination"
    , props: {
        // 页号
        page: {type: [Number, String], default: 1}
        // 每一页容量
        , limit: {type: [Number, String], default: 1}
        // 数据总量，注意后台数据变化，需要通知到前端
        , total: {type: [Number, String], default: 0}
        // 分页变化侦听
        , change: {type: Function}
    }, watch: {
        page: {
            handler: function (val) {
                this.pagination.setPageNum(val);
                this.triggerChange()
            }
        }
        , limit: {
            handler: function (val) {
                this.pagination.setPageSize(val);
                this.triggerChange();
            }
        }
    }, data() {
        return {
            // 分页对象实体
            pagination: undefined
            // 页码输入框
            , valueModel: 1
        }
    }
    , created() {
        this.valueModel = this.page;

        let pagination = new Pagination();
        pagination.setPageNum(this.page);
        pagination.setPageSize(this.limit);
        pagination.setTotal(this.total);
        this.pagination = pagination;
    }
    , methods: {
        /**
         * 分页变化事件
         * 需要避免无限递归
         */
        triggerChange: function () {
            let ret = {};
            ret[pageField] = this.pagination.pageNum;
            ret[limitField] = this.pagination.pageSize;
            this.valueModel = this.pagination.pageNum;
            Layers.executeFunction(this.change, ret);
        }
        /**
         * 文本变化事件
         * 需要避免无限递归
         */
        , textChange: function (e) {
            let val = e.target.value;
            if(Layers.isNotEmpty(val)){
                let n = Layers.toNumber(val);
                if (n !== this.pagination.pageNum) {
                    this.pagination.setPageNum(n);
                    this.triggerChange();
                }
            }
        }
        /**
         * 下一页
         *
         * 需要注意：达到尾页，继续点击会刷新当前数据
         */
        , nextPage: function () {
            console.log(this.pagination);
            this.pagination.nextPage();
            this.triggerChange();
        }
        /**
         * 前一页
         *
         * 需要注意：处在首页，继续点击会刷新当前数据
         */
        , previousPage: function () {
            this.pagination.previousPage();
            this.triggerChange();
        }
    }
}
</script>
